<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>联系我们</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <script src="../js/index.js" type="text/javascript"></script>
    <meta name="author" content="王逸瑶">
    <meta name="keywords" content="魔方,魔方天地,图书">
    <meta name="description" content="魔方天地是一个介绍魔方的网站。">
    <meta name="robots" content="index,follow">
</head>

<body>
<section class="contacts">
    <h2 id="title8">联系我们</h2>
    <p class="details">魔方天地成立于2021年5月，由浙江工业大学软件工程专业1904班王逸瑶所作，为前端大作业。若有不足，还望海涵。</p>
    <fieldset class="contact-form">
        <legend class="form-subtitle">需要填写以下内容</legend>
        <form action="" method="GET" id="contact">
            <div class="form-row">
                <label class="contact">
                    <strong>姓名</strong>
                    <input type="text" name="name" id="name" required="required" placeholder="必填"
                           autofocus="autofocus" class="contact-input">
                </label>
            </div>
            <div class="form-row">
                <label class="contact">
                    <strong>性别</strong>
                    <input type="radio" value="男" name="sex" id="sex1" checked="checked">男
                    <input type="radio" value="女" name="sex" id="sex2">女
                </label>
            </div>
            <div class="form-row">
                <label class="contact">
                    <strong>年龄范围：</strong>
                    <select name="age" id="age" size="1">
                        <option value="1">18岁以下</option>
                        <option value="1" selected="selected">18~28岁</option>
                        <option value="1">28~38岁</option>
                        <option value="1">38~48岁</option>
                        <option value="1">48岁以上</option>
                    </select>
                </label>
            </div>
            <div class="form-row">
                <label class="contact"><strong>擅长：</strong></label>
                <label><input type="checkbox" name="interest" value="三阶" id="interest1" />三阶</label>
                <label><input type="checkbox" name="interest" value="二阶" id="interest2" />二阶</label>
                <label><input type="checkbox" name="interest" value="高阶" id="interest3" />高阶</label>
                <label><input type="checkbox" name="interest" value="异形" id="interest4" />异形</label>
            </div>
            <div class="form-row">
                <label class="contact"><strong>电子邮件：</strong>
                    <input type="email" name="dzyj" id="dzyj" required="required" placeholder="必填" class="contact-input">
                </label>
            </div>
            <div class="form-row">
                <label class="contact"><strong>固定电话：</strong>
                    <input type="text" name="telephone" id="telephone" required="required" pattern="[0-9]{1, 15}" placeholder="必填" class="contact-input">
                </label>
            </div>
            <div class="form-row">
                <label class="contact"><strong>公司：</strong>
                    <input type="text" name="company" id="company" required="required" placeholder="必填" class="contact-input">
                </label>
            </div>
            <div class="form-row">
                <label class="contact"><strong>内容：</strong>
                    <textarea name="content" id="content" cols="20" rows="3" class="contact-input"></textarea>
                </label>
            </div>
            <div class="form-row-button">
                <input type="reset" value="取消" class="send">&nbsp;
                <input type="submit" value="发送" class="send">
            </div>
        </form>
    </fieldset>
</section>
</body>
</html>
